<template>
  <!-- 通知编辑 -->
  <div class="notice-edit">
    <el-card shadow="never" class="table-container" v-loading="loading">
      <!-- {{ formData }} -->
      <template #header>
        <el-button type="primary" plain icon="Back" @click="handleLinkBack" style="margin-right: auto;">
          返回
        </el-button>
        <el-button type="success" icon="Plus" @click="handleSubmit" v-if="!['view'].includes(handleOperate)">
          保存
        </el-button>
      </template>
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100"
        :disabled="['view'].includes(handleOperate)">
        <el-form-item label="通知标题：" prop="title">
          <el-input v-model.trim="formData.title" maxlength="60" clearable placeholder="请输入通知标题" />
        </el-form-item>
        <el-form-item label="通知内容：" prop="content">
          <pre v-if="['view'].includes(handleOperate)" v-html="formData.content"></pre>
          <WangEditor v-model="formData.content" style="min-height: 480px; max-height: 500px"  v-else/>
        </el-form-item>
        <el-form-item label="通知类型：" prop="type">
          <el-select v-model="formData.type" placeholder="请选择通知类型">
            <el-option :label="item.label" :value="Number(item.value)" v-for="(item, index) in dictOptions.notice_type"
              :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="通知等级：" prop="level">
          <el-radio-group v-model="formData.level">
            <el-radio :value="item.value" v-for="(item, index) in dictOptions.public_level" :key="index">{{ item.label
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="目标类型：" prop="targetType">
          <el-radio-group v-model="formData.targetType">
            <el-radio :value="Number(item.value)" v-for="(item, index) in dictOptions.target_type" :key="index">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="指定用户：" prop="targetUserIds" v-if="[2].includes(formData.targetType)">
          <div class="specific-user">
            <el-input v-model="formData.targetUserIds" clearable placeholder="请选择指定用户" disabled />
            <el-button type="primary" plain icon="Plus" @click="handleOpenUserDialog">
              选择
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <UserDialog :userParams="userParams" @close="handleCloseUserDialog"></UserDialog>
  </div>
</template>

<script setup>
defineOptions({ name: 'NoticeEdit' })
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import WangEditor from '@/components/WangEditor.vue'
import UserDialog from './UserDialog.vue'
import { addNotice, getDetailNotice, updateNotice } from '@views/noticeManage/api/noticeManage'
const { proxy } = getCurrentInstance()
const dictOptions = ref(proxy.useDict('notice_type', 'target_type', 'public_level'))
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const formData = reactive({ level: '', targetType: 1 })
const ruleFormRef = ref(null)
const userParams = reactive({ visible: false })
const handleOperate = ref('') // 当前是编辑/详情
const rules = reactive({
  title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
  type: [{ required: true, message: '请选择通知类型', trigger: 'change' }],
  level: [{ required: true, message: '请选择通知等级', trigger: 'change' }],
  targetType: [{ required: true, message: '请选择目标类型', trigger: 'change' }],
  targetUserIds: [{ required: true, message: '请选择指定用户', trigger: 'change' }]
})

const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      handleSave()
    } else {
      return false
    }
  })
}
const handleSave = async () => {
  loading.value = true
  const res = formData.id ? await updateNotice(formData) : await addNotice(formData)
  loading.value = false
  if (res?.code === 200) {
    ElMessage.success('保存成功')
    router.go(-1)
  }
}

// 获取通知详情
const getNoticeData = async (id) => {
  loading.value = true
  const res = await getDetailNotice({ id })
  loading.value = false
  if (res?.code === 200) {
    console.log(res)
    let data = res.data
    formData.id = data.id
    formData.title = data.title
    formData.content = data.content
    formData.type = data.type
    formData.level = data.level
    formData.targetType = data.targetType
    formData.targetUserIds = data.targetUserIds
  }
}

// 返回
const handleLinkBack = () => {
  router.go(-1)
}

// 打开新增/编辑弹窗
const handleOpenUserDialog = (row) => {
  userParams.row = row
  userParams.visible = true
}

// 关闭新增/编辑弹窗
const handleCloseUserDialog = (type) => {
  console.log('关闭')
  userParams.visible = false
}

// 初始化
onMounted(() => {
  const { query } = { ...route }
  // 编辑/详情
  if (query.id) { getNoticeData(query.id) }
  handleOperate.value = query.type
})

</script>

<style scoped lang="scss">
.notice-edit {
  .specific-user {
    width: 100%;
    display: flex;

    .el-input {
      flex: 1;
      margin-right: 20px;
    }
  }
  pre {
    border: 1px solid $lightBorder;
    margin: 0;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    height: 480px;
    overflow: auto;
  }
}
</style>
